[Day8] Fun with HTML5 Canvas

Canvas 的運用

需要用到的技巧與練習目標

1. 元素 與 渲染環境
2. strokeStyle | lineJoin | lineCap

元素

<canvas id="draw" width="150" height="150"></canvas>

<canvas>看起來有點像img但沒有src alt的屬性。
只有width和height但這兩個非必須，也可以運用DOM屬性設定。
也可以和一般影像依樣設定margin border 或是 background，但是這些都會改變canvas實際外觀，

渲染環境(rendering context)

有了<canvas>產生一個繪圖畫布後，畫布上面需要有一個以上的渲染環境，不同的環境(context) 會提供不同的渲染方法。
這邊的範例是舉2D繪圖。

var canvas = docment.getElementById('draw');
var ctx = canvas.getContext('2d');

改變canvas的渲染範圍

透過js的寫法來改變渲染範圍，使渲染範圍占據整個視窗

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

strokeStyle | lineJoin | lineCap

套用樣式與顏色

如果想要套用顏色，有兩種屬性可以選擇。
fillStyle = color 設定填滿圖形用的顏色。
strokeStyle = color 設定勾勒圖形要用的顏色。

這邊範例採用的是 strokeStyle

lineJoin

lineJoin是用來設置銜接兩個長度不為0的相連部分，如何銜接在一起的屬性
有三種屬性可以運用。round bevel和miter，其中miter為預設值。

round 相連的地方會形成一個圓形，看起來圓滑。
bevel 相連的地方會形成一個三角形，使各線段有自己的柺角。
miter 相連的地方會形成一個方形，看起來為尖角轉折。

由於我們想要繪製 流暢的線條 因此這邊選擇 round

lineCap

lineCap是用來設置線段結尾的形狀
有三種屬性可以運用 round butt square
butt `為預設值。

round 線段末端為圓形結束。
butt 線段末端以方形結束。
square 線段末端同樣以方形結束，但是會多繪製一個寬度和線段相同，高度則為寬度一半的方形在最後方。

參考資料來源:
https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Basic_usage#%3Ccanvas%3E_%E5%85%83%E7%B4%A0

https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap